import { DIGIT_MAP, CONTROL_TYPES, PAGE_TYPE_ } from '@/common/const'
import { EVENT_TYPES } from '@/common/events'
import { mapActions, mapState, mapGetters } from 'vuex'
import {guid} from '@/plugins/utils'
import {WbComponentDatas} from '@/store/default-wb-datas'
import { getPxOVwByValue } from '@/store/utils'

export const addUtils = {
  data () {
    return {
      wbLists_: [],
      wbAttr_: {},
      wbData_: {},
    }
  },
  props: {
    event: Object,
    index: Number,
  },
  created () {
    const data_ = {
      DIGIT_MAP: DIGIT_MAP,
      activeNames: [1]
    };
    for(let key in data_) {
      this[key] = data_[key];
    }
  },
  computed: {
    ...mapGetters("components", {
      pages: "getH5Pages",
      pops: "getPopPages"
    }),
    ...mapState({
      componentData: (state) => state.components.currentComponentData,
      itemControls: (state) => _.cloneDeep(state.wbComponents.currentControls),
    }),
    isHaveWbEvent(){
      let events = _.concat(EVENT_TYPES.wb, EVENT_TYPES.wb_);
      let event;
      for(let i = 0, len = events.length; i < len; i++){
        let event_ = events[i];
        if(event_.controlId.length > 0){
          event =  event_;
        }
      }
      return event ? true : false;
    },
    controlData(){
      try{
        return this.itemControls[this.event.controlId]
      }catch(error){
        return null
      }
    },
    eventWbLists(){
      if(this.controlData){
        if(this.controlData.data.elements){
          this.wbLists_ =  this.controlData.data.elements;
        }else{
          this.wbLists_ =  this.controlData.data;
        }
      }
      return this.wbLists_;
    },
    wbAttr() {
      try{
        this.wbAttr_ = this.controlData.wbAttr;
      }catch(error){
        console.log("controlData.wbAttr null");
      }
      return this.wbAttr_;
    },
    wbData() {
      try{
        this.wbData_ = this.controlData.data;
      }catch(error){
        console.log("controlData.data null");
      }
      return this.wbData_;
    },
  },
  methods: {
    ...mapActions({
      updateWbComponent: "wbComponents/updateWbComponent",

      updateWbComponentItem: "wbComponents/updateWbComponentItem",
      addWbComponentItem: "wbComponents/addWbComponentItem",
      deleteWbComponentItem: "wbComponents/deleteWbComponentItem",

      updateCurrentComponentData: "components/updateCurrentComponentData",

      updateInnerComponentWHOrPosition: "components/updateInnerComponentWHOrPosition",
    }),
    onHover(){
    },
    onOut(){
    },
    onUpdateWbComponent(){
      this.updateWbComponent({controlId: this.event.controlId, data: this.wbData});
    },
    onUpdateWbItem(index){
      let controlId = this.event.controlId
      let params = {item: this.eventWbLists[index], index, controlId};
      this.updateWbComponentItem(params);
    },
    onAddWbItem(){
      let controlId = this.event.controlId;
      let item;
      if(this.eventWbLists[0]){
        item = _.cloneDeep(this.eventWbLists[0]);
        item.mid = '';
      }else{
        item = _.cloneDeep(WbComponentDatas[this.event.controlId].data.elements[0]);
      }
      if(controlId == CONTROL_TYPES.wb_lottery){
        item.gift_id = guid();
      }
      this.eventWbLists.push(item);
      this.addWbComponentItem({controlId, item});
    },
    onDeleteWbItem(e, index){
      e.stopPropagation();
      e.preventDefault();
      let params = {controlId: this.event.controlId, index};
      this.eventWbLists.splice(index, 1);
      this.deleteWbComponentItem(params);
    },
    onChangeWbAttr(){
      this.$store.commit("wbComponents/updateWbAttr", {controlId: this.event.controlId, wbAttr: this.wbAttr})
    },
    onUpdateInnerComponentWHOrPosition(comAttr, attr){
      let conAttr = {};
      conAttr[attr] = this[comAttr].conAttr[attr];
      let conStyles = {};
      conStyles[attr] = getPxOVwByValue(conAttr[attr]);
      let params = {};
      params[comAttr] = {conAttr, conStyles}
      this.updateInnerComponentWHOrPosition(params);
    },
    getLists(index) {
      let list = [];
      if(index == PAGE_TYPE_.pop){
        this.pushPops(list);
      }else{
        this.pushPages(list);
      }
      return list;
    },
    pushPages(list){
      let len = this.pages.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "页面-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
    pushPops(list){
      let len = this.pops.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "弹层-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
  },
}
